<template>
  <div class="basicManagement-container">
    <el-row class="header-btn">
      <el-col :span="12" class="editAdd">
        <el-button type="primary" size="small" @click="generateAccount">
          生成学生账号
        </el-button>
        <el-button icon="el-icon-delete" type="danger" size="small" @click="handleDelete">
          批量删除
        </el-button>
      </el-col>
      <el-col :span="12" class="query">
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
          <el-form-item>
            <el-input
                size="small"
                v-model.trim="queryForm.query"
                placeholder="请输入查询条件"
                clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" size="small" @click="queryData">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <el-table
        :data="studentList"
        height="520"
        :element-loading-text="elementLoadingText"
    >
      <el-table-column show-overflow-tooltip type="selection"></el-table-column>
<!--      <el-table-column type="index"></el-table-column>-->
<!--      <el-table-column prop="id" label="id" width="62px"></el-table-column>-->
      <el-table-column prop="admissionNumber" label="学生考号" width="136px"></el-table-column>
      <el-table-column prop="stuName" label="姓名" fixed></el-table-column>
      <el-table-column prop="age" label="年龄" width="50px"></el-table-column>
      <el-table-column prop="sex" label="性别" width="50px"></el-table-column>
      <el-table-column prop="departmentName" label="学院" show-overflow-tooltip></el-table-column>
      <el-table-column prop="major" label="专业" sortable show-overflow-tooltip></el-table-column>
      <el-table-column prop="classId" label="班级" width="90px"></el-table-column>
      <el-table-column prop="stuId" label="学号" width="110px"></el-table-column>
      <el-table-column prop="nativePlace" label="籍贯" show-overflow-tooltip></el-table-column>
      <el-table-column prop="idCard" label="身份证号码" width="172px"></el-table-column>
      <el-table-column prop="graduateSchool" show-overflow-tooltip label="毕业中学"></el-table-column>
      <el-table-column show-overflow-tooltip label="操作" width="120px" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" @click="openAddPaymentItems(scope.row.stuName,scope.row.idCard)">添加支付项</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        :current-page="queryForm.pageNum"
        :page-size="queryForm.pageSize"
        :layout="layout"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    ></el-pagination>

    <el-dialog
        title="添加缴费项"
        :visible.sync="addDialogVisible"
        width="60%"
        @close="addDialogClosed">
      <el-main>
        <el-button icon="el-icon-plus" type="primary" circle @click="addItems"></el-button>
        <br>
        <br>
        <el-col :span="24" class="warp-main">
          <el-form :inline="true" :rules="addFormRules" ref="addRuleFormRef" class="demo-form-inline" v-for="(item, index) in paymentInfo" :key="index">
            <el-card>
              <el-col :span="21">
                <el-form-item label="支付项" prop="payItems" label-width="90px">
                  <el-input v-model="item.payItems"></el-input>
                </el-form-item>
                <el-form-item label="规格" prop="payAttr" label-width="60px">
                  <el-input v-model="item.payAttr"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="金额" prop="payNumber" label-width="90px">
                  <el-input type="number" v-model="item.payNumber"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="备注" prop="remark" label-width="90px">
                  <el-input type="textarea" v-model="item.remark"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-button icon="el-icon-delete" type="danger" circle @click="delItems(index)"></el-button>
              </el-col>
            </el-card>
          </el-form>
        </el-col>
      </el-main>

      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addPaymentInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: "index",
  data() {
    return {
      studentList: [],
      listLoading: true,
      // 操作员
      operator: '',
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 0,
      selectRows: '',
      elementLoadingText: '正在加载...',
      queryForm: {
        query: '',
        pageNum: 1,
        pageSize: 10,
      },
      addDialogVisible: false,
      paymentInfo: [
        {
          payItems: '',
          payAttr: '',
          payNumber: 0,
          remark: ''
        }
      ],
      paymentInfo2: [
        {
          payItems: '',
          payAttr: '',
          payNumber: 0,
          remark: ''
        }
      ],
      stuName: '',
      idCard: '',
      // paymentInfo: {
      //   payItemsArray: [{
      //     payItems: '',
      //     payAttr: '',
      //     payNumber: '',
      //     remark: ''
      //   }]
      // },
      addFormRules: {
        // dormId: [
        //   {required: true, message: '宿舍编号不可为空', trigger: 'blur'}
        // ],
        // dormName: [
        //   {required: true, message: '宿舍名称不可为空', trigger: 'blur'}
        // ],
        // dormType: [
        //   {required: true, message: '请选择宿舍类别', trigger: 'blur'}
        // ]
      },
    }
  },
  created() {
    this.queryData()
  },
  methods: {
    setSelectRows(val) {
      this.selectRows = val
    },
    addItems() {
      this.paymentInfo.push({
        value: ''
      })
      // console.log(this.paymentInfo)
    },
    delItems(index) {
      this.paymentInfo.splice(index, 1)
    },
    addDialogClosed() {
      this.paymentInfo = this.paymentInfo2
      // this.$refs.addRuleFormRef.resetFields()
    },
    openAddPaymentItems(stuName, idCard) {
      this.stuName = stuName
      this.idCard = idCard
      this.user = JSON.parse(window.sessionStorage.getItem("user"));
      // 获取当前登录账号的用户名
      this.operator = this.user.userName
      this.addDialogVisible = true
    },
    async addPaymentInfo() {
      for (let i = 0; i < this.paymentInfo.length; i++) {
        if (this.paymentInfo[i].payItems == '') {
          return this.$message.error('请不要添加空项')
        }
        if (this.paymentInfo[i].payNumber == 0) {
          return this.$message.error('请填写金额')
        }
      }
      const {data : res} = await this.$http.post('addPaymentItems?stuName='+this.stuName + '&idCard='+ this.idCard + '&operator='+ this.operator, this.paymentInfo)
      // console.log(res)

      if (res.code != 200) return this.$message.error(res.msg)
      this.paymentInfo = null
      this.paymentInfo = this.paymentInfo2
      this.addDialogVisible = false
      if (res.code == 200) return this.$message.success("提交成功")
    },

    handleEdit() {

    },
    handleDelete() {

    },
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.queryForm.pageSize = newSize
      this.queryData()
    },
    handleCurrentChange(newPage) {
      this.queryForm.pageNum = newPage
      this.queryData()
    },
    async queryData() {
      const {data : res} = await this.$http.get('students', { params : this.queryForm })
      // console.log(res)
      this.studentList = res.data
      this.total = res.total
    },
    async generateAccount() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      const {data : res} = await this.$http.get('generateAccount')
      if (res.code != 200) {
        loading.close()
        return this.$message.error('生成账号失败')
      }
      loading.close()
      this.$message.success('账号生产成功')
    }
  }
}
</script>

<style lang="less" scoped>
.basicManagement-container {
  width: 98%;
  background: white;
  padding: 12px 16px 12px 16px;
}

.header-btn {
  //text-align: left;
  //display: flex;
  //justify-content: space-between;
  //align-items: center;
  //color: black;
  //font-size: 20px;

  >.editAdd {
    height: 42px;
    display: flex;
    align-items: center;
    justify-items: center;
  }
  .query {
    height: 22px;
    margin-top: 22px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: flex-end;
  }
}
.el-table >.el-table-column {
  height: 12px;
}
.el-card {
  margin-bottom: 8px;
}

</style>
